<template>
    <page-container>
        <div class="ant-pro-table">
            <div class="ant-pro-table-search">
                <a-form layout="horizontal">
                    <a-row :gutter="16" type="flex" justify="start">
                        <a-col :xs="12" :sm="12" :md="6" :lg="4">
                            <a-form-item>
                                <a-input-search placeholder="输入医院名称查询" v-model:value="queryParams.projectName" allow-clear enter-button @search="handleSearch()" />
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="4">
                            <a-button @click="handleReset" class="ml-5px">重置</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <a-card :body-style="{ padding: 0 }" ref="elRef">
                <div class="ant-pro-table-list-toolbar">
                    <div class="ant-pro-table-list-toolbar-container">
                        <div class="ant-pro-table-list-toolbar-left">
                            <div class="ant-pro-table-list-toolbar-title">医院管理</div>
                        </div>
                        <div class="ant-pro-table-list-toolbar-right">
                            <a-space align="center">
                                <a-button type="primary" v-permission="[`yfwy:medical-caregiver-hospital:create`]" @click="addBuild()">
                                    <plus-outlined />
                                    新增
                                </a-button>
                            </a-space>
                            <div class="ant-pro-table-list-toolbar-divider">
                                <a-divider type="vertical" />
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip title="刷新">
                                    <reload-outlined @click="reload" />
                                </a-tooltip>
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-tooltip title="密度">
                                    <a-dropdown :trigger="['click']" placement="bottomRight">
                                        <column-height-outlined />
                                        <template #overlay>
                                            <a-menu
                                                style="width: 80px"
                                                :selected-keys="[state.tableSize]"
                                                @click="
                                                    ({ key }) => {
                                                        fetchDataContext.tableSize = String(key);
                                                    }
                                                "
                                            >
                                                <a-menu-item key="default">
                                                    <a href="javascript:;">默认</a>
                                                </a-menu-item>
                                                <a-menu-item key="middle">
                                                    <a href="javascript:;">中等</a>
                                                </a-menu-item>
                                                <a-menu-item key="small">
                                                    <a href="javascript:;">紧凑</a>
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </a-tooltip>
                            </div>
                            <div class="ant-pro-table-list-toolbar-setting-item">
                                <a-popover placement="bottomRight" arrowPointAtCenter trigger="click" overlayClassName="ant-pro-table-column-setting-overlay">
                                    <template #title>
                                        <div class="ant-pro-table-column-setting-title">
                                            <a-checkbox v-model:checked="columnState.checkAll" :indeterminate="columnState.indeterminate" @change="handleColumnAllClick">
                                                列展示 / 排序
                                            </a-checkbox>
                                            <a @click="reset">重置</a>
                                        </div>
                                    </template>
                                    <template #content>
                                        <span class="ant-pro-table-column-setting-list">
                                            <drag-container
                                                lockAxis="y"
                                                dragClass="ant-pro-table-drag-ghost"
                                                dropClass="ant-pro-table-drop-ghost"
                                                @drop="({ removedIndex, addedIndex }) => move(removedIndex, addedIndex)"
                                            >
                                                <template :key="column.key" v-for="column in dynamicColumnItems">
                                                    <draggable>
                                                        <div class="ant-pro-table-column-setting-list-item">
                                                            <drag-icon />
                                                            <a-checkbox :checked="column.checked" @change="handleColumnChange($event, column)">
                                                                {{ column.label }}
                                                            </a-checkbox>
                                                        </div>
                                                    </draggable>
                                                </template>
                                            </drag-container>
                                        </span>
                                    </template>
                                    <a-tooltip title="列设置">
                                        <setting-outlined />
                                    </a-tooltip>
                                </a-popover>
                            </div>
                            <!-- <div class="ant-pro-table-list-toolbar-setting-item">
                                        <a-tooltip :title="screenState ? '退出全屏' : '全屏'">
                                            <fullscreen-outlined v-if="!screenState" @click="setFull" />
                                            <fullscreen-exit-outlined v-else @click="exitFull" />
                                        </a-tooltip>
                                    </div> -->
                        </div>
                    </div>
                </div>
                <a-table
                    row-key="id"
                    :size="state.tableSize"
                    :loading="state.loading"
                    :columns="dynamicColumns"
                    :data-source="state.dataSource"
                    :pagination="{
                        'show-size-changer': true,
                        current: state.current,
                        pageSize: state.pageSize,
                        total: state.total,
                        showTotal: total => `共 ${total} 条`,
                    }"
                    :scroll="{ x: 1150, y: appStore.tableHeight }"
                    ref="tableRef"
                    :getPopupContainer="_trigger => tableRef.$el"
                    @change="handleTableChange"
                >
                    <template #bodyCell="{ record, column }">
                        <template v-if="column.dataIndex === 'banner'">
                            <a-image :width="300" :height="40" :src="record.banner" />
                        </template>
                        <template v-if="column.dataIndex === 'logo'">
                            <a-image :width="80" :height="80" :src="record.logo" />
                        </template>
                        <template v-if="column.dataIndex === 'status'">
                            <a-badge :status="statusMap[record.status].status" :text="statusMap[record.status].text" />
                        </template>

                        <template v-if="column.dataIndex === 'action'">
                            <a-space>
                                <a v-permission="[`yfwy:medical-caregiver-hospital:update`]" @click="handleEdit(record)">编辑</a>
                                <a-popconfirm title="确定要删除吗 ?" @confirm="onDelete(record)" v-if="record.projectCode !== 'YFPHFW'">
                                    <a-button type="text" danger size="small" v-permission="[`yfwy:medical-caregiver-hospital:delete`]">删除</a-button>
                                </a-popconfirm>
                            </a-space>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </div>

        <DialogModal :model="updateModalRef" :visible="modalVisible" @cancel="handleEditCancel" @success="handleSearch()" />
    </page-container>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref, onMounted } from 'vue';
    import {
        PlusOutlined,
        ReloadOutlined,
        ColumnHeightOutlined,
        SettingOutlined,
        DownOutlined,
        FullscreenOutlined,
        FullscreenExitOutlined,
        DeleteOutlined,
        HighlightOutlined,
    } from '@ant-design/icons-vue';
    import { Container as DragContainer, Draggable } from '@/components/draggable';
    import { getMedicalCaregiverHospitalPage, deleteMedicalCaregiverHospital } from '@/api/companion/hospital';
    import type { Pagination, TableColumn } from '@/typing';
    import { useFetchData } from '@/utils/hooks/useFetchData';
    import { useFullscreen } from '@/utils/hooks/useFullscreen';
    import { useTableDynamicColumns } from '@/utils/hooks/useTableColumn';
    import { message } from 'ant-design-vue';
    import DragIcon from '@/components/table/drag-icon.vue';
    import DialogModal from './dialog-modal.vue';
    import { statusMap } from '../porter/common';

    import { useAppStore } from '@/store/app';

    const appStore = useAppStore();
    const baseColumns: TableColumn[] = [
        {
            title: '医院名称',
            dataIndex: 'projectName',
        },
        {
            title: 'logo',
            dataIndex: 'logo',
        },
        {
            title: 'banner',
            dataIndex: 'banner',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
        },
    ];
    export default defineComponent({
        name: 'Porter',
        setup() {
            const tableRef = ref();
            const {
                state: columnState,
                dynamicColumns,
                dynamicColumnItems,
                handleColumnAllClick,
                handleColumnChange,
                reset,
                move,
            } = useTableDynamicColumns(baseColumns, { needRowIndex: false });
            const queryParams = reactive<any>({
                projectName: '',
            });
            const [elRef, screenState, { setFull, exitFull }] = useFullscreen();
            const fetchDataContext = reactive({
                current: 1,
                pageSize: 10,
                tableSize: 'middle', // 'default' | 'middle' | 'small'
                stripe: true,
                isList: false,
                executeImmediately: false,
                requestParams: {
                    ...queryParams,
                },
            });
            const { reload, context: state } = useFetchData(getMedicalCaregiverHospitalPage, fetchDataContext);

            // 表格数据和加载
            const handleTableChange = ({ current, pageSize }: Pagination) => {
                fetchDataContext.current = current;
                fetchDataContext.pageSize = pageSize;
            };

            const handleSearch = () => {
                fetchDataContext.current = 1;
                fetchDataContext.requestParams = { ...queryParams };

                reload();
            };

            const handleReset = () => {
                Object.keys(queryParams).forEach(key => {
                    if (key != 'projectCode' && key != 'buildingIds') {
                        delete queryParams[key];
                    }
                });
                handleSearch();
            };

            onMounted(() => {
                handleSearch();
            });

            // 新增修改表单
            const modalVisible = ref<boolean>(false);
            const updateModalRef = ref<any>({});

            const addBuild = () => {
                updateModalRef.value = {
                    projectCode: queryParams.projectCode,
                    projectName: queryParams.projectName,
                };
                modalVisible.value = true;
            };

            const handleEdit = row => {
                updateModalRef.value = {
                    ...row,
                };
                modalVisible.value = true;
            };

            const onDelete = (data: any) => {
                deleteMedicalCaregiverHospital(data.id).then(res => {
                    if (res.code == 200) {
                        message.success('删除成功');
                        reload();
                    }
                });
            };

            const handleEditCancel = () => {
                modalVisible.value = false;
                reload();
            };

            const handleTreeCheck = (
                checkedKeys,
                e: any,
                // e: { checked: boolean; checkedNodes; node; event },
            ) => {
                queryParams.projectCode = checkedKeys;
                fetchDataContext.executeImmediately = true;
                handleSearch();
            };

            return {
                handleTreeCheck,
                updateModalRef,
                addBuild,
                appStore,
                tableRef,
                handleSearch,
                queryParams,
                reload,
                state,
                columnState,
                dynamicColumns,
                dynamicColumnItems,
                // fullscreen
                elRef,
                screenState,
                setFull,
                exitFull,
                handleTableChange,
                handleColumnChange,
                handleColumnAllClick,
                reset,
                move,
                onDelete,
                handleEditCancel,
                // 表单
                modalVisible,

                fetchDataContext,
                handleReset,
                handleEdit,

                statusMap,
            };
        },
        components: {
            DragIcon,
            PlusOutlined,
            ReloadOutlined,
            ColumnHeightOutlined,
            SettingOutlined,
            FullscreenOutlined,
            FullscreenExitOutlined,
            Draggable,
            DownOutlined,
            DragContainer,
            DialogModal,
            DeleteOutlined,
            HighlightOutlined,
        },
    });
</script>
